4-4. タグ使用ルール
タグはつねに適切なものを使用することをこころがけ、divやspanといった意味を持たないタグが氾濫するコードは避けてください。デザインによって下記のタグでは表現できない場合は別の類似タグを使用することを可とします。
| 種類 | 説明 |
|---|---|
| h1 - h6 | 見出しに使用してください。h1は原則ヘッダー箇所のロゴに使用し、ページに一度のみの使用としてください。h2以下の設定は必ずarticleまたはsectionなどのセクショニングタグ配下に設置し階層レベルに合ったものを使用してください。 |
| p | 段落に使用してください。まとまった文章を対象としますので細かなテキストパーツはpではなくspan/divタグ等のタグを使用してください。段落が別れる場合はpタグを分けるようにし、二重改行による段落分けは極力避けてください。 |
| ul > li | 順序に意味を持たないリストに使用してください。ナビゲーションリストやコンテンツリストなど順序を変えても問題のないものが対象となります。 |
| ol > li | 順序に意味を持つリストに使用してください。パンくずリストや手順リスト等、順序が変わると意味合いが変わってしまうものが対象となります。 |
| dl > dt + dd | 用語とその説明から構成される文章に使用してください。汎用性が高く考え方によってはこのタグだけで完結出来るように思えますが、見出しとその文章を誤ってこのタグでくくってしまう可能性があります。内容をよく考慮した上でこのタグを使用してください。 |
| table > thead / tfoot / tbody > tr > th / td | 表にのみ使用し、レイアウト目的では使用しないでください。thead、tfoot、tbody、captionは不要な場合に省略可とします。 |
| small | 免責・警告・法的規制・著作権・ライセンス要件などの注釈・細目に使用してください。フッターに記載のあるコピーライトへの使用が主用途となります。 |
| address | サイト、ページに関するお問い合わせ先・連絡先に使用してください。物件情報や会社の住所にこのタグを使用するのは誤った利用方法ですので注意してください。 |
| main | ページの主要な要素に対し使用してください。セクショニング要素ではありませんので必須とはなりえません。無理に使用する必要はありません。 |
| article ※1 | このタグで囲った箇所だけで内容が伝わる独立した要素に使用してください。ページの主要な要素全体を囲うのが一般的な使用方法になります。 |
| section ※1 | 見出しとその内容からなる構造の文書に使用してください。コンテンツ内で見出しレベルがさがる場合は必ずこのsectionで囲うようにしてください。 |
| aside ※2 | コンテンツの本内容とは直接関係せず、余談・補足情報などを記載している箇所に使用してください。余談・補足情報とは、本文と関連してはいるが区別して掲載するべき内容のことです。例えば、印刷物などで本文の補足として欄外に掲載されるような内容です。 |
| nav ※2 | サイトの主要なナビゲーションに使用し、ページには一回のみの使用としてください。 |
| header | セクショニング・コンテンツやbody（文書全体）のヘッダーに使用してください。 |
| footer | セクショニング・コンテンツやbody（文書全体）のフッターに使用してください。 |
| figure > figcaption | 本文から参照されるイラスト・図・写真にfigureタグを使用し、その説明文にfigcaptionを使用してください。 |
| label | フォーム部品と項目名を関連付けるときに使用してください。特にチェックボックス、ラジオボタンは選択しやすいよう必ず関連付けを行うようにしてください。 |
| hr、group、sub、sup、b | これらのタグは非推奨タグとします。使用は控え代替手法で表現してください。 |
※1このタグはセクショニング要素ですので必ず直下に見出しタグを使用してください。
（非セクショニング要素の中に見出しタグを入れる場合は直下でなくても問題ありません）
※2 このタグはセクショニング要素ですが見出しタグは必須とはなりません。無理に設定する必要はありません。
設定する場合は文書構造に合った見出しタグを使用してください。